<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>兼容性处理</title>
    <!-- 让IE浏览器处于一个最优的渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对一些国产的“双核”浏览器的设置，让浏览器优先使用webkit内核去渲染网页 -->
    <meta name="render" content="webkit">
    <!--[if lt ie 9]>
    <script src="./html5shiv.js"></script>
    <![endif]-->
    <style>
        header {
            background-color: orange;
        }
        footer {
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: green;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <header class="page-header">
        <h1>尚品汇</h1>
    </header>
    <hr>
    <!-- 主导航 -->
    <nav>
        <a href="#">首页</a>
        <a href="#">订单</a>
        <a href="#">购物车</a>
        <a href="#">我的</a>
    </nav>
    <!-- 主要内容 -->
    <div class="page-content">
        <!-- 侧边栏导航 -->
        <aside style="float: right;">
            <nav>
                <ul>
                    <li><a href="#">秒杀专区</a></li>
                    <li><a href="#">会员专区</a></li>
                    <li><a href="#">领取优惠券</a></li>
                    <li><a href="#">品牌专区</a></li>
                </ul>
            </nav>
        </aside>
        <!-- 文章 -->
        <article>
            <h2>《如何一夜暴富》</h2>
            <section>
                <h3>第一种方式：通过做梦</h3>
                <p>你要这么做梦：2xxxxxxxxxxxxxxxxxxxxxxx</p>
            </section>
            <section>
                <h3>第二种方式：通过买彩票</h3>
                <p>你要这么买彩票：xxxxxxxxxxxxxxxxxxxxxxx</p>
            </section>
            <section>
                <h3>第三种方式：通过学习前端</h3>
                <p>学前端：xxxxxxxxxxxxxxxxxxxxxxx</p>
            </section>
        </article>
    </div>
    <hr>
    <!-- 页脚 -->
    <footer>
        <nav>

             3
            <a href="#">友情链接1</a>
            <a href="#">友情链接2</a>
            <a href="#">友情链接3</a>
            <a href="#">友情链接4</a>
        </nav>
    </footer>
</body>
</html>